<template>
  <div class="latestCard">
    <div class="card">
      <el-card class="box-card" body-style="padding:0px;">
        <div slot="header" class="clearfix">
          <span>{{cardName}}</span>
        </div>
        <div v-for="(item,index) in newestList" :key="index" v-if="index < 9" class="text item cartItem">
          <!--          <div :style="'background-image:url('+img+')'" class="cardImg"></div>-->
          <el-row>
            <el-col :span="8">
              <div class="cardImg">
                <img :src="item.imgUrl" alt="">
              </div>
            </el-col>
            <el-col :span="16">
              <div class="cartDetail">
                <div class="cartName">
                  {{item.cname}}
                </div>
                <div class="block">
                  <el-rate v-model="item.star" disabled></el-rate>
                </div>
                <div class="cartPrice">
                  {{`￥`+item.price}}
                </div>
              </div>
            </el-col>
          </el-row>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
  export default {
    name: "cardItem",
    props: {
      newest: {
        type: Array
      }
    },
    data() {
      return {
        newestList: this.newest,
        cardName: '最新商品',
       }
    },

    watch: {
      newest() {
        this.newestList = this.newest
      }
    },

    methods: {}

  }
</script>

<style lang="less">
  .latestCard {
    margin-bottom: 30px;

    .card {
      //width: 300px;
      .cartItem:hover {
        box-shadow: inset 0 0 38px rgba(0, 0, 0, 0.08);
      }

      .el-card__header {
        background: linear-gradient(#fff, #f5f5f5)
      }

      .cartItem {
        display: inline-block;
        border: 1px solid #ddd;
        transition: all 0.3s ease-in-out 0s;
        width: 369px;
        padding: 30px 20px;

        .cardImg {
          width: 100%;

          img {
            width: 100%;
            height: 110px;
            cursor: pointer;
          }
        }

        .cartDetail {
          text-align: center;
          padding-top: 15px;

          div {
            margin-bottom: 10px;
          }

          .cartName:hover {
            color: #be1e13;
            cursor: pointer;
          }

          .cartPrice {
            color: red;
            height: 34px;
          }
        }

      }
    }
  }
</style>
